<template>
  <div class="p-8">
    <el-card class="rounded-3xl shadow-md">
      <template #header>
        <div class="card-header">
          <span>公告列表</span>
        </div>
      </template>
      <el-table v-loading="loading" ref="multipleTableRef" :data="tableData" style="width: 100%">
        <el-table-column property="mTitle" label="标题内容" width="600" />
        <el-table-column label="发布时间">
          <template #default="scope">
            <div>
              <!-- 表格列：发布时间，使用自定义模板展示格式化的日期 -->
              {{ formatToLocalTime(scope.row.mDate, "YYYY-MM-DD") }}
            </div>
          </template>
        </el-table-column>
        <el-table-column property="mType" label="类型" />
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <!-- 为每行公告添加查看详情按钮，点击时调用lookNoticeDetail方法 -->
              <el-button type="primary" link @click="lookNoticeDetail(scope.row)"
              >查看详情</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="flex justify-between items-center">
          <p class="text-sm text-gray-400">
            共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPage }} 页
          </p>
          <div class="flex items-center gap-4">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :background="true"
              layout="prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
            <el-select
              class="w-32"
              v-model="pageSize"
              @change="handleSizeChange"
            >
              <el-option
                v-for="option in pageSizeOptions"
                :value="option"
                :key="option"
                :label="`${option}条/页`"
              >
                {{ option }}条/页
              </el-option>
            </el-select>
            <div class="flex items-center gap-2">
              <p class="text-sm text-gray-400">跳至</p>
              <el-input-number
                :min="1"
                :max="totalPage"
                @change="handleCurrentChange"
                :controls="false"
                class="w-16"
              />
              <p class="text-sm text-gray-400">页</p>
            </div>
          </div>
        </div>
      </template>
    </el-card>
  </div>
</template>
<script setup>
// 导入ApiNotice，用于发起API请求获取公告列表
import { ApiNotice } from "@/core/api/index.js";
import { computed, onMounted, ref } from "vue";
// 导入formatToLocalTime，一个工具函数，用于日期格式化
import { formatToLocalTime } from "@/core/utils/dateFormat.js";
// 导入useRouter，Vue Router的钩子，用于导航和路由参数
import {useRouter} from "vue-router";

// 定义加载状态响应式引用
const loading = ref(false);
// 使用useRouter钩子创建router实例
const router = useRouter();
// 使用ref创建响应式引用，用于存储当前页码、每页显示的行数、数据总行数、每页显示行数的选项数组和表格数据
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(10);
const totalPage = computed(() => Math.ceil(total.value / pageSize.value));
const pageSizeOptions = [10, 20, 50, 100];
const tableData = ref([]);

// 定义getShowInfo函数，用于获取公告列表数据
const getShowInfo = async () => {
  // 显示加载状态
  loading.value = true;
  // 调用API获取公告列表数据
  const response = await ApiNotice.getNoticeList({
    page: currentPage.value,
    size: pageSize.value,
  });
  // 如果响应的code属性为0（假设这表示成功），更新表格数据和总行数
  if (response.code == 0) {
    tableData.value.splice(0, tableData.value.length, ...response.data.list);
    total.value = response.data.total ? response.data.total : 10;
  }
  // 隐藏加载状态
  loading.value = false;
};
// 定义lookNoticeDetail函数，用于处理查看公告详情的操作
const lookNoticeDetail = (row) => {
   // 使用router.push进行导航到指定的路由，并传递公告ID作为参数
  router.push({ name: "school-notice-detail", params: { id: row.mId } });
};

// 定义handleSizeChange函数，用于处理每页显示行数变化时的逻辑
const handleSizeChange = (size) => {
  pageSize.value = size;
  getShowInfo();
};
// 定义handleCurrentChange函数，用于处理当前页码变化时的逻辑
const handleCurrentChange = (page) => {
  currentPage.value = page;
  getShowInfo();
};

// 使用onMounted生命周期钩子，在组件挂载后自动调用getShowInfo函数
onMounted(() => {
  getShowInfo();
});
</script>
